<template>
  <div class="percentage-box">
    <el-progress
      color="#24ba58"
      type="circle"
      :percentage="percentageNum"
    ></el-progress>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {
    percentageNum: {
      required: true,
      default() {
        return 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.percentage-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);

    ::v-deep .el-progress__text {
      color: #24ba58 !important;
    }
  }
</style>
